<template>
    <div class="login-box">
        <div class="loginbox">
            <div class="login-wrap">
                <h1 class="header">{{ ctitle }}</h1>
                <form action="#">
                    <div class="ksd-el-items"><input type="text" v-model="loginUser.account" class="ksd-login-input"  placeholder="请输入账号"></div>
                    <div class="ksd-el-items"><input type="password" v-model="loginUser.password" class="ksd-login-input" placeholder="请输入密码" @keydown.enter="handleSubmit"></div>
                    <div class="ksd-el-items pr">
                        <input type="text" class="ksd-login-input" maxlength="6" v-model="loginUser.code" placeholder="请输入验证码"  @keydown.enter="handleSubmit">
                        <img v-if="codeURL" class="codeurl"  :src="codeURL" @click="handleGetCapatcha">
                    </div>
                    <div class="ksd-el-items"><input type="button" @click.prevent="handleSubmit" class="ksd-login-btn" value="登录"></div>            
                </form>
            </div>
        </div>
        <div class="imgbox">
            <img src="../assets/imgs/login_left.svg" alt="">    
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import {useRouter,useRoute} from 'vue-router'
import {useUserStore} from '@/stores/user.js'
import {getCapatcha} from '@/api/code.js'
import KVA from "@/utils/kva.js";
const userStore = useUserStore();
const ctitle = ref(import.meta.env.VITE_APP_TITLE)

// 定义一个路由对象
const router = useRouter()
// 获取当前路由信息，用于获取当前路径参数，路径，HASH等
const route = useRoute();
// 准备接受图像验证码
const codeURL = ref("");
// 获取用户输入账号和验证码信息
const loginUser = reactive({
    code:"",
    account:"feige1",
    password:"123456",
    codeId:""
})


// 根据axios官方文档开始调用生成验证码的接口
const handleGetCapatcha = async () => {
    const resp = await getCapatcha()
    console.log("resp",resp)
    const {baseURL,id} = resp.data
    codeURL.value = baseURL
    loginUser.codeId = id
}


// 提交表单
const  handleSubmit = async () => {
    // axios.post ---application/json---gin-request.body
    if(!loginUser.code){
        KVA.error("请输入验证码")
        return;
    }
    if(!loginUser.account){
        KVA.error("请输入账号")
        return;
    }
    if(!loginUser.password){
        KVA.error("请输入密码")
        return;
    }

    // 把数据放入到状态管理中
    try{
        await userStore.toLogin(loginUser)
        var path = route.query.path || "/"
        router.push(path)
    }catch(e){
        if(e.code === 60002){
            loginUser.code = ""
            handleGetCapatcha()
        }
    }
}
// 用生命周期去加载生成验证码
onMounted(() => {
    handleGetCapatcha()
})

</script>

<style scoped lang="scss">
    .pr{position: relative;}
    .codeurl{position: absolute;top:5px;right:5px;width: 120px;}
    .ksd-el-items{margin: 15px 0;}
    .ksd-login-input{border:1px solid #eee;padding:12px 8px;width: 100%;box-sizing: border-box;outline: none;border-radius: 4px;}
    .ksd-login-btn{border:1px solid #eee;padding:12px 8px;width: 100%;box-sizing: border-box;
        background:#2196F3;color:#fff;border-radius:4px;cursor: pointer;}
        .ksd-login-btn:hover{background:#1789e7;}
    .login-box{
        display: flex;
        flex-wrap: wrap;
        background: url("../assets/imgs/login_background.jpg");
        background-size:cover;
        .loginbox{
            width: 50%;height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            .header{margin-bottom: 10px;}
            .login-wrap{
                width: 500px;
                height: 444px;
                padding:20px 100px;
                box-sizing: border-box;
                border-radius: 8px;
                box-shadow: 0 0 10px #fafafa;
                background: rgba(255,255,255,0.6);
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }
        .imgbox{
            width: 50%;
            height: 100vh;
            display: flex;
            align-items: center;
        }
    }
</style>